<template>
    <div id="account">

        <h3>结算方式</h3>
        <div>
            <div style="float: right;">
                <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
                <el-button type="" @click="allUpdateSta()">禁用</el-button>
                <el-button type="primary" @click="allstartSta()">启用</el-button>
                <el-button type="" @click="reFlush()">刷新</el-button>
            </div>
        </div>
        <div style="clear: both;"></div>
        <hr style="margin-top: 10px">
        <div class="account-content" style="margin-top: 10px;">
            <el-table height="500px" :data="list" border style="width: 100%;font-size: 13px;margin-left: 20px;"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="clearName" label="类别" width="200">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="150">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#66b1ff" inactive-color="#c1c1c1"
                            :active-value="1" :inactive-value="2"
                            @change="updateSta(scope.row.status, scope.row.clearId)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row.clearId)" type="text" size="small">删除</el-button>
                        <el-button @click="updateType(scope.row.clearId)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog width="400px" top="100px" title="修改支出类别" :visible.sync="chooseType">
            <div>
                <table>

                    <br>
                    <tr>
                        <td>类别:</td>
                        <td><el-input v-model="clear.clearName"></el-input></td>
                    </tr>
                    <br>
                    <tr>
                        <td></td>
                        <td><el-button style="margin-left: 170px" type="primary" @click="update()">修改</el-button></td>
                    </tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="flush1()">确 定</el-button>
            </div>
        </el-dialog>
        <el-pagination style="position: relative;left: 700px;bottom: 30px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
            :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
        <el-dialog width="400px" top="100px" title="新增结算方式类别" :visible.sync="dialogFormVisible">
            <AddPayType />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="flush()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AddAccount from './AddAccount.vue';
import AddCustomerType from './AddCustomerType.vue';
import AddOut from './AddOut.vue';
import AddPayType from './AddPayType.vue';
import AddProviderType from './AddProviderType.vue';

export default {
    name: 'Account',
    components: {
        AddAccount,
        AddProviderType,
        AddPayType
    },
    data() {
        return {
            dialogFormVisible: false,
            chooseType: false,
            status: "",
            list: [],
            selectedTypeIds: [],
            clearName: "",
            clearId: 0,
            clear: {
                clearName: "",
                clearId: 0,
            }
        }
    },
    methods: {
        handleClick: function (clearId) {
            if (confirm("是否删除")) {
                this.axios({
                    url: "/info/clear/delete",
                    params: {
                        clearId: clearId,
                    }
                }).then(rs => {
                    console.log(rs)
                    if (rs.data.code === 200) {
                        this.searchPage()
                    } else {
                        alert("删除失败")
                    }
                })
            } else {

            }
        },
        reFlush: function () {
            window.location.reload();
        },
        allUpdateSta: function () {
            alert("1")
            if (!Array.isArray(this.selectedTypeIds) || this.selectedTypeIds.length === 0) {

                return;
            }
            const formData = new FormData();
            formData.append('list', JSON.stringify(this.selectedTypeIds));
            this.axios.post(
                "/info/clear/allUpdateSta",

                formData

            ).then(rs => {
                this.searchPage()
                this.selectedTypeIds = []
            })
        },
        allstartSta: function () {
            if (!Array.isArray(this.selectedTypeIds) || this.selectedTypeIds.length === 0) {

                return;
            }
            const formData = new FormData();
            formData.append('list', JSON.stringify(this.selectedTypeIds));
            this.axios.post(
                "/info/clear/allStartSta",

                formData

            ).then(rs => {
                this.searchPage()
                this.selectedTypeIds = []
            })
        },
        handleSelectionChange(val) {
            // val 是一个数组，包含了所有选中行的数据对象
            this.selectedTypeIds = val.map(item => item.clearId);
            console.log(this.selectedTypeIds)
        },
        update: function () {
            alert(this.clearId)
            if (this.clear.clearName === "") {
                alert("名称不能为空")
                return
            }
            this.axios({
                url: "/info/clear/update",
                params: {
                    clearId: this.clear.clearId,
                    clearName: this.clear.clearName,
                }
            }).then(rs => {
                console.log(rs)
                if (rs.data.code === 200) {
                    alert("修改成功")
                } else {
                    alert("类别已存在")
                }
            })
        },
        updateType: function (clearId) {
            this.clearId = clearId
            // alert(typeId)
            this.chooseType = true
            this.axios({
                url: "/info/clear/selectById",
                params: {
                    clearId: clearId
                }
            }).then(rs => {
                this.clear = rs.data.clear
            })
        },
        updateSta: function (status, clearId) {
            // alert(status)
            // alert(typeId)
            this.axios({
                url: "/info/clear/updateSta",
                params: {
                    status: status,
                    clearId: clearId
                }
            }).then(rs => {
                console.log(rs)
            })
        },
        flush: function () {
            this.dialogFormVisible = false
            this.searchPage()
        },
        flush1: function () {
            this.chooseType = false
            this.searchPage()
        },
        searchPage: function () {
            this.axios({
                url: "/info/clear/selectAll",
                params: {
                    status: this.status
                }
            }).then(rs => {
                console.log(rs)
                this.list = rs.data.list
            })
        }
    },
    created: function () {
        this.searchPage()
    }
}
</script>

<style scoped>
#account {
    width: 100%;
    height: 100%;
}

.account-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.account-top h3 {
    display: inline-block;
    margin-right: 1000px;
}

.account-content {
    width: 100%;
    height: calc(100% - 60px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}
</style>